<template>
    <div class='pic2 page_w_h'>
        <div class="left">

            <div>
                <video width="450" height="800" controls :src="vidSrc">
                </video>
            </div>
        </div>
        <div class="right">
            <ul class="list">
                <li v-for="(item, index) in vidData" @click="clickVid(item)">
                    {{ item.title }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import data from '../../assets/data/data'
let vidData = ref(data.videos)
let vidSrc = ref(vidData.value[0].src)
function clickVid(obj) {
    vidSrc.value = obj.src
}
</script>

<style scoped lang='less'>
.pic2 {
    display: flex;

    .left {
        position: relative;
        width: 70%;
        height: 100%;
        text-align: center;
        padding-top: 2.5%;
        background-color: #eee;
    }

    .right {
        width: 30%;
        height: 100%;
        background: #FFFFE0;

        .list {
            margin-top: 20px;
            padding: 0 10px;
            max-height: calc(100% - 70px);
            overflow: auto;

            li {
                border-bottom: 2px solid #ddd;
                height: 40px;
                line-height: 40px;
                cursor: pointer;
            }
        }
    }
}
</style>